<template>
	<view class="content">
		<view><wyb-drop-down ref="dropDown" :options="options"></wyb-drop-down></view>

		<view class="list" >
			<view class="icon" v-for="icon in list" >
				<view class="icon-image"><image :src="icon.thumb" mode="scaleToFill" @click="toxiao(icon.id)"></image></view>
				<view>
					<view class="icon-title">{{icon.name}}</view>
					<view class="icon-content">{{icon.model.name}}/{{icon.style.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';

export default {
	data() {
		return {
			list:[],
			data:{},
			options: [
				{
					header: '区域',
					contents: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区', '浏阳市', '宁乡市', '长沙县']
				},
				{
					header: '风格',
					contents: ['恬淡田园风格', '新中式风格装修', '现代简约风格', '欧式古典风格', '地中海风格', '东南亚风格']
				},
				{
					header: '户型',
					contents: ['115m²', '120m²', '135m²', '140m²']
				}
			]
		};
	},
	components: {
		wybDropDown
	},
	methods: {
		toxiao(id){
					   uni.navigateTo({
					   	url: '/pages/project/project?id='+id,
					   });
		}
	},
	onLoad(){
		uni.request({
			url: 'https://baiyi.kent.work/api/v1/system/getBuildList',
			method: 'POST',
			data: {
				"page": 1, //页码
				"limit": 10, //分页偏移量（即每页多少条数据）
				"style": 0, //风格
				"area": 0, //区域
				"model": 0 //户型
			},
			success: res => {
				console.log(res)
				this.list=res.data.data.list
			},
			fail: () => {},
			complete: () => {}
		}),
		uni.request({
			url: 'https://baiyi.kent.work/api/v1/system/getBaseInfo',
			method: 'GET',
			data: {},
			success: res => {
				console.log(res)
				this.data=res.data.data
			},
			fail: () => {},
			complete: () => {}
		});
	}
};
</script>

<style lang="less" scoped>
/deep/ .wyb-drop-down-content-item-label{
	  
	align-items: center;
	justify-content: center ;
}
.content {
	padding-top: 96rpx;

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 22rpx;
		padding: 22rpx;

		.icon {
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

			.icon-image {
				width: 100%;

				image {
					border-radius: 15rpx 12rpx 0 0;
					display:block;
					width: 100%;
					height: 236rpx;
				}
			}
			.icon-title {
				font-size: 24rpx;
				margin-top: 16rpx;
				margin-left: 20rpx;
			}
			.icon-content {
				font-size: 20rpx;
				color: #666666;
				margin-left: 20rpx;
				margin-bottom: 12rpx;
			}
		}
	}
}
</style>
